<!doctype html>
<html lang="en" dir="ltr" itemscope itemtype="http://schema.org/Article">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>BlogSlideShow 3.0a Live Demo - fancy image viewer jQuery plugin</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
        <meta name="description" content="BlogSlideShow - image viewer with fancy transition effects (+CSS3)" />
        <meta name="keywords" content="fancy, image preview, slideshow, CSS3" />
        <link href="./assets/demo.css" rel="stylesheet" media="all" />
        <link href="./assets/blogslideshow.css" rel="stylesheet" media="all" />
        <link rel="shortcut icon" href="./assets/favicon.ico" />
        <link rel="icon" href="./assets/favicon.ico" type="image/ico">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
        <script src="./js/jquery.blogslideshow.min.js" type="text/javascript"></script>
        <link rel="demo" href="http://demo.dsheiko.com/blogslideshow" title="BlogSlideShow - fancy image viewer jQuery plugin" />
        <script src="http://demo.dsheiko.com/share/js/sharebar.js" type="text/javascript"></script>
        <link rel="publisher" href="https://plus.google.com/113857365337532405020" />
        <link href='http://fonts.googleapis.com/css?family=Berkshire+Swash' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Open+Sans:600,700' rel='stylesheet' type='text/css'>
        <!--[if lt IE 9]>
            <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>
    <body>
        <header role="banner">
            <div>
                <hgroup>
                    <h1>BlogSlideShow</h1>
                    <h2>jQuery slideshow plugin</h2>
                </hgroup>
                <a class="fork" href="http://code.google.com/p/blogslideshow">Fork Me on GoogleCode</a>
            </div>
        </header>
        <section role="main">
            <div>
                <article>
                    <h2>Introduction</h2>
                    <p><dfn>BlogSlideShow</dfn> is a jQuery plugin enhancesing your blog pages with <span rel="tag">image viewer</span>, which provides fancy transition effects. </p>
                    <p><dfn>BlogSlideShow</dfn> comprises my library <a href="https://github.com/dsheiko/Transition-Effects-JS-Library" target="_blank">tEffects</a>, which
                        tries to apply CSS3 transitions to achieve the effects. If the browser does not support CSS3, it visualizes the effects using JS.
                        So the plugin is running effects as good as the browser can afford.
                    </p>
                    <p>Likely you already have images on blog pages linked. Just add rel attribute containing "blogslideshow" to them.</p>
                    <p>When you click on such a link, you'll get the image viewer on the overlay. That contains toolbar by which you can navigate images. Besides, you can use <span rel="tag">keyboard</span> arrows <abbr title="Left arrow key">&lt;-</abbr>, <abbr title="Right arrow key">-&gt;</abbr>, <abbr title="Ecape key">Esc</abbr> as well.</p>
                </article>
                <article>
                    <h2>Demo</h2>
                    <p>Select the visual effect you want to apply:</p>
                    <form>
                        <fieldset class="effect">
                            <legend>Effect</legend>
                            <ul>

                                <li><input id="e1" type="radio" checked="checked" name="effect" value="FadeInOut" /><label for="e1">FadeInOut</label></li>
                                <li><input id="e2" type="radio" name="effect" value="Jalousie" /><label for="e2">Jalousie</label></li>
                                <li><input id="e3" type="radio" name="effect" value="Ladder" /><label for="e3">Ladder</label></li>
                                <li><input id="e4" type="radio" name="effect" value="Scroll" /><label for="e4">Scroll</label></li>
                                <li><input id="e5" type="radio" name="effect" value="Deck" /><label for="e5">Deck</label></li>
                                <li><input id="e8" type="radio" name="effect" value="Jaw" /><label for="e8">Jaw</label></li>
                                <li><input id="e6" type="radio" name="effect" value="DiagonalCells" /><label for="e6">DiagonalCells</label></li>
                                <li><input id="e7" type="radio" name="effect" value="RandomCells" /><label for="e7">RandomCells</label></li>
                            </ul>
                        </fieldset>
                        <fieldset class="direction">
                            <legend>Direction</legend>
                            <ul>
                                <li><input id="d2" type="radio" disabled="disabled" checked="checked" name="direction" value="horizontal" /><label for="d2">Horizontal</label></li>
                                <li><input id="d1" type="radio" disabled="disabled"  name="direction" value="vertical" /><label for="d1">Vertical</label></li>
                            </ul>
                        </fieldset>
                    </form>

                    <p>
                        Now click on one of the following links and enjoy the image viewer.
                    </p>
                    <ul>
                        <li><a href="./slides/sample_fussen.jpg" title="Füssen - the romantic soul of Bavaria" rel="blogslideshow">Füssen</a></li>
                        <li><a href="./slides/sample_zakopane.jpg" title="Zakopane - the winter capital of Poland" rel="blogslideshow">Zakopane</a></li>
                        <li><a href="./slides/sample_wurzburg.jpg" title="Würzburg - on the way to fortress Marienberg" rel="blogslideshow">Würzburg</a></li>
                        <li><a href="./slides/sample_keukenhof.jpg" title="Keukenhof - the Garden of Europe" rel="blogslideshow">Keukenhof</a></li>
                    </ul>
                    <p>
                        The photos are taken from my <a href="http://picasaweb.google.com/web.sbelarus/">personal alboum</a>
                    </p>
                </article>
                <article>
                    <h2>Usage and API</h2>
                    <p>To make the image viewer available on your page you just need this package files and those lines in your HTML: </p>

<textarea readonly="readonly" rows="9" class="code">
<link href="./assets/blogslideshow.css" rel="stylesheet" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="./js/jquery.blogslideshow.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('a[rel=blogslideshow]').bsShow();
    });
</script>
</textarea>


        <p>Well, that works with no effect applied. Let's define the effect we want:</p>

<textarea readonly="readonly" rows="6" class="code">
 $('a[rel=blogslideshow]').bsShow({
    effect: 'Jalousie',
    direction: 'horizontal'
});
</script>
</textarea>
                </article>
                <div class="download">
                    <a class="btn btn-inverse btn-large" href="http://code.google.com/p/blogslideshow/downloads/list">Download the latest version from GoogleCode</a>
                </div>
            </div>
        </section>
        <footer>
            <article>
                <p><var>jquery.blogslideshow.js</var> is created by <a href="http://dsheiko.com">Dmitry Sheiko</a>.
                    It's released under the GPLv2 license. </p>
                <p>If you have any questions or feedback you can use the <a href="http://code.google.com/p/blogslideshow">google code project page.</a>
                </p>
            </article>
        </footer>

    <script type="text/javascript">
    <!--
    $(document).ready(function(){
        var bss = $('a[rel=blogslideshow]').bsShow({
            effect: $('input[name=effect]').val(),
            direction: $('input[name=direction]').val()
        });
        $('form input:radio').bind('change', function(){
           if ($(this).val() in {'FadeInOut':1, 'DiagonalCells':1, 'RandomCells':1 }) {
               $('input[name=direction]').attr('disabled', 'disabled');
           } else {
               $('input[name=direction]').removeAttr('disabled');
           }
           bss.set({
                effect: $('input[name=effect]:checked').val(),
                direction: $('input[name=direction]:checked').val()
           });
        });
    }); // -->
    </script>

</body>
</html>
